<template>
    <div class="my-break-line">
        <div class="title">
            <div class="title-left">
                <img alt="" src="/img/slices/logo.png"/>
                <div style="font-size: 16px; font-weight: bold;color: #DFEEF3;">{{ form.title }}</div>
            </div>
            <div class="title-right">
                <el-button
                        type="text"
                        :class="{'button-selected': selectedButton === 'week', 'button-unselected': selectedButton !== 'week'}"
                        @click="select('week')">周
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                        type="text"
                        :class="{'button-selected': selectedButton === 'month', 'button-unselected': selectedButton !== 'month'}"
                        @click="select('month')">月
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                        type="text"
                        :class="{'button-selected': selectedButton === 'year', 'button-unselected': selectedButton !== 'year'}"
                        @click="select('year')">年
                </el-button>
            </div>
        </div>
        <div class="my-break-line-bottom">
            <div class="my-break-line-select">
                <div class="select-left">
                    <el-select :teleported="false" :popper-append-to-body="false" v-model="select_value"
                               placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div ref="chart" class="chart"></div>
        </div>
    </div>
</template>

<script>


import {getDaysArray, heightConfig3, set_option_BrokenLine3} from "@/utils/loadPage";
import debounce from 'lodash/debounce';
import * as echarts from 'echarts'


// 折线图
export default {
    name: "MyBrokenLine",
    data() {
        return {
            max_height: heightConfig3(),
            // 遮罩层
            loading: false,
            // 创建防抖函数
            debouncedSetOption: debounce(this.set_option, 50),
            cards: [],
            itemData: null,
            form: {
                title: '告警设备走势',
                title_center: 'center', // 标题位置
                encode_value: 'time',
                encode_name: 'time',
                sort_field: 'time',
                x_name: '日期',
                y_name: '告警数量',
                x_key: 'time',
                y_key: 'count',
                y_suffix: '次',
                color: '#fff',
                x_color: '#FFFFFF',
                y_color: '#DCDCDC',
                x_line_color: '#0E4E64',
                y_line_color: '#204C63',
                title_color: '#fff',
                dataList: []
            },
            options: [{
                value: '选项1',
                label: '一键通'
            }, {
                value: '选项2',
                label: '血压仪'
            }, {
                value: '选项3',
                label: '血糖仪'
            }, {
                value: '选项4',
                label: '体脂仪'
            }],
            select_value: '选项1',
            selectedButton: 'week', // 默认选中“周”
        };
    },
    mounted() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },
    methods: {
        select(button) {
            this.selectedButton = button;
            console.log('选中~~~', button)
        },
        // 处理窗口大小变化事件
        handleResize() {
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option();
        },

        set_option() {
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart)
            console.log(this.form)
            let option = set_option_BrokenLine3(this, this.form)
            this.myChart.setOption(option)
        },

        /** 查询数据**/
        get_data() {
            let daysArray = getDaysArray(null, null); // 获取日期数组
            this.form.dataList = [];
            for (let i = 0; i < daysArray.length - 18; i++) {
                let time = daysArray[i];
                let count = Math.floor(Math.random() * 1400 + 100); // 生成 100 到 1500 之间的随机总数
                this.form.dataList.push({time, count}); // 添加到数据源
            }
        },
    }
};
</script>


<style scoped lang="scss">

.my-break-line {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .title {
        flex: 1;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        //border: orange solid 1px;

        .title-left {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 2%;

            img {
                width: 9%;
                padding-right: 2%;
            }
        }

        .title-right {
            flex: 1;
            display: flex;
            justify-content: right;
            align-items: center;
            padding-right: 6%;


            .el-button {
                font-size: 16px;
                color: #37D6AF;
                font-weight: bold;
            }

            .button-selected {
                color: white; /* 选中状态的文字颜色 */
            }

            .button-unselected {
                color: #37D6AF; /* 未选中状态的文字颜色 */
            }


            ::v-deep .el-divider--vertical {
                width: 1.1%;
                background-color: #37D6AF;
                opacity: 0.5;
            }

        }
    }

    .my-break-line-bottom {
        flex: 7;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;


        .my-break-line-select {
            flex: 1;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            //border: #f81f61 solid 1px;
            display: flex;
            justify-content: left;
            align-items: end;
            padding-top: 1%;

            .select-left {
                width: 40%;
                height: 90%;
                box-sizing: border-box;
                margin-left: 11%;
                display: flex;
                align-items: end;
            }

            ::v-deep .el-input--suffix .el-input__inner {
                font-size: 16px;
                color: #3AE6D2;
                font-weight: bold;
                background-color: #052832;
                border: 1px solid #01413A;
                opacity: 0.8;
            }

            ::v-deep .el-input--medium .el-input__inner {
                font-size: 16px;
                color: #3AE6D2;
                font-weight: bold;
                background-color: #052832;
                border: 1px solid #01413A;
                opacity: 0.8;
            }


            //下拉框
            ::v-deep .el-select-dropdown {
                border: none;
                background-color: #052832;
                opacity: 0.9;
            }

            //聚焦时的样式
            .el-select .el-input.is-focus .el-input__inner {
                border-color: #0B61AA;
                background-color: #052832;
                color: #3AE6D2;
            }

            //下拉框选中
            .el-select-dropdown__item {
                color: #eee;
            }

            //鼠标经过下拉框
            .el-select-dropdown__item.hover,
            .el-select-dropdown__item:hover {
                color: #3AE6D2;
                background-color: #0F3360;
                opacity: 0.9;
            }


            //
            //::v-deep .el-select .el-input .el-select__caret {
            //    color: #35D3C2;
            //
            //}
            //
            //::v-deep .el-select-dropdown__item.selected {
            //    color: #3AE6D2!important;
            //}
            //
            //::v-deep .el-select-dropdown .el-popper {
            //    background-color: #052832;
            //    //opacity: 0.8;
            //}
            //
            //::v-deep .el-scrollbar__view .el-select-dropdown__list{
            //    background-color: #052832;
            //}


            //:deep(.el-popper.is-light){
            //    background: #307cbf ;
            //    border: 1px solid #273f70 ;
            //}
            //
            //:deep(.el-select-dropdown__item.hover){
            //    background: transparent ;
            //    border: none ;
            //    color: #04FAA0;
            //}
            //
            //
            //:deep(.el-select-dropdown__item){
            //    background: transparent ;
            //    border: none ;
            //    color: #fff;
            //}
            //
            //:deep(.el-popper.is-light .el-popper__arrow::before) {
            //    border: 1px solid #4778d9;
            //    background: #4778d9;
            //    right: 0;
            //}

        }

        .chart {
            flex: 5;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    }


}


</style>
